<template>
    <div class="madp-customer-churn">
        <statistics-card v-loading="totalTableloading" :cardInfo="cardInfo" :cardData="basicInfo" />
        <div class="madp-search-form">
            <span class="madp-search-form-label">{{ tableType == 1 ? '选择机构:' : '选择成员:' }}</span>
            <el-select v-model="searchItem">
                <el-option v-for="item in options" :key="item.objectId" :label="item.objectName" :value="item.objectId"></el-option>
            </el-select>
            <el-button class="madp-button" type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="(searchItem = ''), handleSearch()">清空</el-button>
            <el-button v-if="deptIds.length > 1" class="madp-table-btn2" type="primary" @click="backLastLevel">返回上一级</el-button>
        </div>
        <el-table
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            :data="customerTableData"
            style="width: 100%;margin:20px 0"
            v-loading="customerTableloading"
            v-show="tableType === 1"
        >
            <el-table-column label="序号">
                <template slot-scope="scope">{{ (page.current - 1) * page.size + scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="code" label="机构号">
                <template slot-scope="scope">{{ scope.row.code || '--' }}</template>
            </el-table-column>
            <el-table-column label="机构名">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewDept(scope.row)">{{ scope.row.name }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="contactTotalCount" label="客户总数量"></el-table-column>
            <el-table-column prop="contactLossTotalCount" label="流失客户总数"></el-table-column>
            <el-table-column prop="wxLossCount" label="流失微信客户"></el-table-column>
            <el-table-column prop="qywxLossCount" label="流失企业微信客户"></el-table-column>
            <el-table-column prop="yesterdayNetGrowthCount" label="昨日新增数"></el-table-column>
        </el-table>
        <el-table
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            :data="customerTableData"
            style="width: 100%;margin:20px 0"
            v-loading="customerTableloading"
            v-show="tableType === 2"
        >
            <el-table-column label="序号">
                <template slot-scope="scope">{{ (page.current - 1) * page.size + scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="code" label="账号"></el-table-column>
            <el-table-column prop="name" label="成员名"></el-table-column>
            <el-table-column prop="contactTotalCount" label="客户总数量"></el-table-column>
            <el-table-column prop="wxLossCount" label="流失客户总数"></el-table-column>
            <el-table-column prop="wxLossCount" label="流失微信客户"></el-table-column>
            <el-table-column prop="qywxLossCount" label="流失企业微信客户"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            class="madp-pagination"
            @size-change="handlesize"
            @current-change="handlePageCurrent"
            :current-page="page.current"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
        <div class="madp-statistics-chart">
            <div class="madp-statistics-title">趋势图</div>
            <div class="madp-gap-wrap">
                <tabsTime ref="tabs1" :form="tabs" :curDeptId="deptId" @changeViews="changeViews1" />
            </div>
        </div>
        <div id="madp-chart-e2"></div>
    </div>
</template>
<script>
import StatisticsCard from '@/components/statistics-card/';
import tabsTime from '@/components/tabs-time-choose';
import { getLossInfo, getLossStatistics, getLossList, getOptions } from '@/api/customer-churn/customer-churn-list';
export default {
    name: 'madp-customer-churn',
    components: {
        StatisticsCard,
        tabsTime
    },
    data() {
        return {
            // 基础信息
            cardInfo: [
                {
                    label: '流失客户总数',
                    key: 'contactLossTotalCount',
                    color: '#FFD700'
                },
                {
                    label: '昨日流失数',
                    key: 'yesterdayLossCount',
                    color: 'rgb(123, 215, 0)'
                },
                {
                    label: '流失微信客户',
                    key: 'wxLossCount',
                    color: 'rgb(23, 115, 70)'
                },
                {
                    label: '流失企业微信客户',
                    key: 'qywxLossCount',
                    color: '#FF8C00'
                },
                {
                    label: '昨日新增数',
                    key: 'yesterdayAddedCount',
                    color: '#90EE90'
                }
            ],
            // tabs内容
            tabs: [
                {
                    label: '流失客户总数',
                    value: 1
                },
                {
                    label: '流失微信客户',
                    value: 2
                },
                {
                    label: '流失企业微信客户',
                    value: 3
                }
            ],
            // 表格loading
            totalTableloading: false,
            //折线图数据
            chartInfo: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为:'line' | 'shadow'
                    },
                    formatter: '{b}<br>客户总数: {c}'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    name: '人数',
                    type: 'value'
                },
                series: [
                    {
                        name: '客户总数',
                        type: 'line',
                        data: [],
                        lineStyle: {
                            color: '#ED5555'
                        },
                        itemStyle: {
                            color: '#ED5555'
                        }
                    }
                ]
            },
            searchItem: '',
            options: [],
            customerTableData: [],
            customerTableloading: false,
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            tableType: 1,
            basicInfo: {},
            deptId: 1,
            deptIds: []
        };
    },
    created() {
        this.deptId = this.$store.getters.userInfo.deptId;
        this.deptIds = [this.deptId];
        this.initDate();
    },
    methods: {
        // 初始化
        initDate() {
            this.totalTableloading = true;
            getLossInfo({ deptId: this.deptId })
                .then((res) => {
                    this.totalTableloading = false;
                    if (res.data && res.data.code === 0) {
                        this.basicInfo = res.data.data;
                    }
                })
                .catch(() => {
                    this.totalTableloading = false;
                });
            getOptions(this.deptId).then((res) => {
                if (res.data && res.data.code === 0) {
                    this.options = res.data.data.objectList;
                }
            });
            this.getList();
        },
        // 获取表格数据
        getList(data) {
            if (!data) {
                this.page.current = 1;
            }
            let { current, size } = this.page;
            this.customerTableloading = true;
            let obj = { current, size, deptId: this.deptId };
            if (this.searchItem) obj.objectId = this.searchItem;
            getLossList(obj)
                .then((res) => {
                    this.customerTableloading = false;
                    if (res.data && res.data.code === 0) {
                        this.customerTableData = res.data.data.records;
                        this.page.total = res.data.data.total;
                        this.tableType = res.data.data.extraProps.pageObjectType != 'dept' ? 2 : 1;
                    }
                })
                .catch(() => {
                    this.customerTableloading = false;
                });
        },
        // 条件查询
        handleSearch(val) {
            this.getList();
        },
        // 查看详情
        viewDetail(data) {
            let obj = {
                type: 1,
                ...data
            };
            this.$emit('showDetail', obj);
        },
        // 分页
        handlesize(val) {
            this.page.size = val;
            this.getList(1);
        },
        // 分页
        handlePageCurrent(val) {
            this.page.current = val;
            this.getList(1);
        },
        // 查看部门
        viewDept(data) {
            this.deptId = data.id;
            this.deptIds.push(this.deptId);
            this.searchItem = '';
            this.initDate();
        },
        // 返回上一级
        backLastLevel() {
            this.deptIds.pop();
            this.deptId = this.deptIds[this.deptIds.length - 1];
            this.searchItem = '';
            this.initDate();
        },
        // 更新图表
        changeViews1(data) {
            let { startTime, endTime, type } = data;
            getLossStatistics({ startTime, endTime, type, deptId: this.deptId }).then((res) => {
                if (res.data.code != 0) return;
                let xAxisData = [],
                    seriesData = [],
                    arr = res.data.data;
                arr.map((item) => {
                    xAxisData.push(item.time);
                    seriesData.push(item.number);
                });
                this.chartInfo.xAxis.data = xAxisData;
                this.chartInfo.series[0].data = seriesData;
                let name = '';
                name = this.tabs.filter((i) => {
                    return i.value === data.type;
                })[0].label;
                this.chartInfo.tooltip.formatter = `{b}<br>${name}: {c} 人`;
                let myChart = this.$echarts.init(document.getElementById('madp-chart-e2'));
                myChart.setOption(this.chartInfo);
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            });
        }
    }
};
</script>
<style scoped lang="scss">
.madp-search-form {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
    .el-input {
        width: 240px !important;
    }
    &-label {
        line-height: 36px;
        display: inline-block;
        margin-right: 6px;
    }
}
.madp-table-btn {
    width: 100%;
    text-align: right;
    margin-top: 15px;
}
.madp-table-btn2 {
    margin-left: 10px;
}
#madp-chart-e2 {
    width: 100%;
    height: 650px;
    margin: 0 auto;
}
.madp-statistics-title {
    color: #333;
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.madp-gap-wrap {
    margin-top: 20px;
}
</style>
